<template>
  <el-row justify="space-between">
    <el-col style="margin-bottom: 5px;color: #606266" :span="22"><span>任务编号:{{ jobId }}</span></el-col>
    <el-col style="margin-bottom: 5px;color: #606266" :span="2">类型:{{ jobType == 0 ? '考试' : '作业' }}</el-col>
  </el-row>
  <el-row>
    <el-col :span="12">
      <el-card class="card" style="height: 600px">
        <template #header>
          <div class="card-header">
            <el-button-group>
              <el-button class="button" >组题区</el-button>
              <el-button class="button" type="primary" >选题区</el-button>
            </el-button-group>
            <el-button class="button" type="text">提交</el-button>
          </div>
        </template>
        <el-form>
          <el-form-item label="题目类型">
            <el-select v-model="questionType" class="m-2" placeholder="Select" size="large">
              <el-option label="单选题" value="0"></el-option>
              <el-option label="多选题" value="1"></el-option>
              <el-option label="判断题" value="2"></el-option>
              <el-option label="纯文字题" value="3"></el-option>
              <el-option label="带图文字题" value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-row justify="center">
        <el-col :span="12">
          <el-card class="card" style="height: 600px">
            <template #header>
              <div class="card-header">
                <span>预览区</span>
                <el-button class="button" type="text">Operation button</el-button>
              </div>
            </template>
            <el-scrollbar>

            </el-scrollbar>
          </el-card>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "JobEditPage",
  props: ['jobId', 'jobType'],
  data() {
    return {
      questionType:'',
      job:{
        id:this.jobId,
        createId: '',
        type:this.jobType,
        startTime:'',
        endTime:'',
        status:'',
        deptId:'',
        remarks:'',
        score:''
      },
      question:{
        userId:'',
        questionContent:'',
        questionType:'',
        answer:'',
        score:'',
        level:'',
        major_id:'',
        status:'',
        isobjective:'',
        remark:''
      }
    }
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}
</style>